/**
 * 底板管理页面JavaScript - 简化版本
 */

let selectedFile = null;
let currentTemplateId = null;
let isEditMode = false;

$(document).ready(function() {
    console.log('底板管理页面加载完成');
    
    // 文件选择事件 - 使用简单的事件绑定
    $(document).on('change', '#templateImageFile', function(e) {
        console.log('文件选择事件触发');
        const file = e.target.files[0];
        if (file) {
            handleFileSelect(file);
        }
    });

    // 上传表单提交
    $(document).on('submit', '#uploadForm', function(e) {
        e.preventDefault();
        console.log('上传表单提交');
        handleFileUpload();
    });

    // 手动创建表单提交
    $(document).on('submit', '#manualForm', function(e) {
        e.preventDefault();
        console.log('手动表单提交');
        handleManualSubmit();
    });

    // 本地路径表单提交
    $(document).on('submit', '#pathForm', function(e) {
        e.preventDefault();
        console.log('路径表单提交');
        handlePathSubmit();
    });

    // 读取路径文件信息
    $(document).on('click', '#loadFromPath', function(e) {
        e.preventDefault();
        loadFileFromPath();
    });

    // 编辑底板按钮
    $(document).on('click', '.edit-template', function(e) {
        e.preventDefault();
        const templateId = $(this).data('template-id');
        editTemplate(templateId);
    });

    // 删除底板按钮
    $(document).on('click', '.delete-template', function(e) {
        e.preventDefault();
        const templateId = $(this).data('template-id');
        const templateName = $(this).data('template-name');
        deleteTemplate(templateId, templateName);
    });

    // 模态框重置
    $('#templateModal').on('hidden.bs.modal', function() {
        resetModal();
    });

    // 尺寸预览更新
    $('#templateWidth, #templateHeight').on('input', updateSizePreview);
    
    // 初始化
    updateSizePreview();
});

// 处理文件选择
function handleFileSelect(file) {
    console.log('处理文件选择:', file.name, 'Type:', file.type, 'Size:', file.size);
    
    // 验证文件类型
    const fileExtension = file.name.toLowerCase().split('.').pop();
    const allowedExtensions = ['psd', 'psb', 'tif', 'tiff', 'png', 'jpg', 'jpeg', 'gif', 'webp'];
    
    if (!allowedExtensions.includes(fileExtension)) {
        alert('不支持的文件格式，请选择 PSD、PSB、TIF、PNG、JPG 等图片文件');
        return;
    }
    
    // 文件大小检查（本地部署，支持大文件）
    if (file.size > 500 * 1024 * 1024) { // 500MB限制，防止过大文件
        if (!confirm(`文件较大 (${formatFileSize(file.size)})，上传可能需要较长时间，是否继续？`)) {
            return;
        }
    }
    
    selectedFile = file;
    console.log('文件验证通过，设置selectedFile');
    
    // 显示预览
    showFilePreview(file);
    
    // 启用提交按钮
    $('#uploadSubmitBtn').prop('disabled', false);
    
    // 自动填充名称
    if (!$('#uploadTemplateName').val()) {
        const nameWithoutExt = file.name.replace(/\.[^/.]+$/, "");
        $('#uploadTemplateName').val(nameWithoutExt);
    }
}

// 显示文件预览
function showFilePreview(file) {
    console.log('显示文件预览:', file.name);
    
    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
            $('#previewImage').attr('src', e.target.result);
            $('#previewFilename').text(file.name);
            $('#previewDimensions').text(`${img.width} × ${img.height} px`);
            $('#previewFileSize').text(formatFileSize(file.size));
            $('#uploadPreview').show();
            console.log('预览显示成功');
        };
        img.onerror = function() {
            console.error('图片预览加载失败');
        };
        img.src = e.target.result;
    };
    
    reader.readAsDataURL(file);
}

// 处理文件上传
function handleFileUpload() {
    console.log('开始处理文件上传');
    
    if (!selectedFile) {
        alert('请选择文件');
        return;
    }
    
    const name = $('#uploadTemplateName').val().trim();
    if (!name) {
        alert('请输入底板名称');
        return;
    }
    
    const formData = new FormData();
    formData.append('template_image', selectedFile);
    formData.append('name', name);
    formData.append('description', $('#uploadTemplateDescription').val().trim());
    
    console.log('准备上传文件:', selectedFile.name, '大小:', formatFileSize(selectedFile.size));
    
    // 显示进度条和状态
    $('#uploadProgress').show();
    $('#uploadSubmitBtn').prop('disabled', true).html('<i class="bi bi-cloud-upload me-1"></i>上传中...');
    
    // 大文件上传配置
    $.ajax({
        url: '/upload_template_image',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        timeout: 300000, // 5分钟超时，支持大文件
        xhr: function() {
            const xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    $('.progress-bar').css('width', percentComplete + '%');
                    const progressText = `${Math.round(percentComplete)}% (${formatFileSize(e.loaded)}/${formatFileSize(e.total)})`;
                    console.log('上传进度:', progressText);
                    
                    // 更新按钮文本显示进度
                    $('#uploadSubmitBtn').html(`<i class="bi bi-cloud-upload me-1"></i>上传中 ${Math.round(percentComplete)}%`);
                }
            });
            return xhr;
        },
        success: function(response) {
            console.log('上传成功:', response);
            $('#uploadProgress').hide();
            $('#uploadSubmitBtn').prop('disabled', false).html('<i class="bi bi-cloud-upload me-1"></i>上传并创建');
            
            if (response.success) {
                alert(`底板上传成功！\n名称: ${response.template_id}\n尺寸: ${response.width} x ${response.height}`);
                $('#templateModal').modal('hide');
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                alert('上传失败: ' + (response.error || '未知错误'));
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            console.error('上传失败:', textStatus, errorThrown, xhr);
            $('#uploadProgress').hide();
            $('#uploadSubmitBtn').prop('disabled', false).html('<i class="bi bi-cloud-upload me-1"></i>上传并创建');
            
            let errorMessage = '网络错误';
            if (textStatus === 'timeout') {
                errorMessage = '上传超时，请检查文件大小或网络连接';
            } else if (xhr.responseJSON && xhr.responseJSON.error) {
                errorMessage = xhr.responseJSON.error;
            } else if (xhr.status === 413) {
                errorMessage = '文件太大，服务器无法处理';
            }
            
            alert('上传失败: ' + errorMessage);
        }
    });
}

// 处理手动创建
function handleManualSubmit() {
    const formData = {
        name: $('#templateName').val().trim(),
        width: parseInt($('#templateWidth').val()),
        height: parseInt($('#templateHeight').val()),
        description: $('#templateDescription').val().trim()
    };

    // 验证数据
    if (!formData.name) {
        alert('请输入底板名称');
        return;
    }

    if (!formData.width || formData.width <= 0) {
        alert('请输入有效的宽度');
        return;
    }

    if (!formData.height || formData.height <= 0) {
        alert('请输入有效的高度');
        return;
    }

    const url = isEditMode ? `/templates/${currentTemplateId}/edit` : '/templates/create';

    $.ajax({
        url: url,
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function(response) {
            if (response.success) {
                alert(isEditMode ? '底板更新成功' : '底板创建成功');
                $('#templateModal').modal('hide');
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                alert('操作失败: ' + (response.error || '未知错误'));
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON || {};
            alert('操作失败: ' + (response.error || '网络错误'));
        }
    });
}

// 编辑底板
function editTemplate(templateId) {
    // 简化的编辑功能
    $('#templateModal').modal('show');
    $('#manual-tab').click(); // 切换到手动创建选项卡
}

// 删除底板
function deleteTemplate(templateId, templateName) {
    if (confirm(`确定要删除底板"${templateName}"吗？此操作不可撤销。`)) {
        $.ajax({
            url: `/templates/${templateId}/delete`,
            method: 'POST',
            success: function(response) {
                if (response.success) {
                    alert('底板删除成功');
                    location.reload();
                } else {
                    alert('删除失败: ' + (response.error || '未知错误'));
                }
            },
            error: function(xhr) {
                const response = xhr.responseJSON || {};
                alert('删除失败: ' + (response.error || '网络错误'));
            }
        });
    }
}

// 重置模态框
function resetModal() {
    selectedFile = null;
    currentTemplateId = null;
    isEditMode = false;
    
    $('#uploadForm')[0].reset();
    $('#manualForm')[0].reset();
    $('#pathForm')[0].reset();
    $('#uploadPreview').hide();
    $('#pathPreview').hide();
    $('#uploadProgress').hide();
    $('#uploadSubmitBtn').prop('disabled', true);
    $('#pathSubmitBtn').prop('disabled', true);
    
    // 重置进度条
    $('.progress-bar').css('width', '0%');
    
    // 重置按钮文本
    $('#uploadSubmitBtn').html('<i class="bi bi-cloud-upload me-1"></i>上传并创建');
}

// 更新尺寸预览
function updateSizePreview() {
    const width = parseInt($('#templateWidth').val()) || 0;
    const height = parseInt($('#templateHeight').val()) || 0;
    
    const previewBox = $('#sizePreview .preview-box');
    const previewText = $('#sizePreview .preview-text');
    
    if (width > 0 && height > 0) {
        const maxSize = 200;
        let previewWidth, previewHeight;
        
        if (width > height) {
            previewWidth = Math.min(width, maxSize);
            previewHeight = (height * previewWidth) / width;
        } else {
            previewHeight = Math.min(height, maxSize);
            previewWidth = (width * previewHeight) / height;
        }
        
        previewBox.css({
            width: previewWidth + 'px',
            height: previewHeight + 'px'
        });
        
        previewText.text(`${width}×${height} px`);
    } else {
        previewBox.css({
            width: 'auto',
            height: 'auto'
        });
        previewText.text('输入尺寸查看预览');
    }
}

// 处理本地路径提交
function handlePathSubmit() {
    const name = $('#pathTemplateName').val().trim();
    const imagePath = $('#templateImagePath').val().trim();
    const description = $('#pathTemplateDescription').val().trim();
    
    if (!name) {
        alert('请输入底板名称');
        return;
    }
    
    if (!imagePath) {
        alert('请输入图片路径');
        return;
    }
    
    console.log('创建底板从路径:', imagePath);
    
    $.ajax({
        url: '/create_template_from_path',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            name: name,
            image_path: imagePath,
            description: description
        }),
        success: function(response) {
            if (response.success) {
                alert(`底板创建成功！\nID: ${response.template_id}\n尺寸: ${response.width} x ${response.height}`);
                $('#templateModal').modal('hide');
                setTimeout(() => {
                    location.reload();
                }, 1000);
            } else {
                alert('创建失败: ' + (response.error || '未知错误'));
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON || {};
            alert('创建失败: ' + (response.error || '网络错误'));
        }
    });
}

// 从路径读取文件信息
function loadFileFromPath() {
    const imagePath = $('#templateImagePath').val().trim();
    
    if (!imagePath) {
        alert('请输入图片路径');
        return;
    }
    
    console.log('读取文件信息:', imagePath);
    
    $.ajax({
        url: '/load_from_path',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            image_path: imagePath
        }),
        success: function(response) {
            if (response.success) {
                $('#pathFilename').text(response.filename);
                $('#pathDimensions').text(`${response.width} × ${response.height} px`);
                $('#pathFileSize').text(formatFileSize(response.file_size));
                $('#pathPreview').show();
                $('#pathSubmitBtn').prop('disabled', false);
                
                // 自动填充名称
                if (!$('#pathTemplateName').val()) {
                    const nameWithoutExt = response.filename.replace(/\.[^/.]+$/, "");
                    $('#pathTemplateName').val(nameWithoutExt);
                }
                
                console.log('文件信息读取成功');
            } else {
                alert('读取失败: ' + (response.error || '未知错误'));
                $('#pathPreview').hide();
                $('#pathSubmitBtn').prop('disabled', true);
            }
        },
        error: function(xhr) {
            const response = xhr.responseJSON || {};
            alert('读取失败: ' + (response.error || '网络错误'));
            $('#pathPreview').hide();
            $('#pathSubmitBtn').prop('disabled', true);
        }
    });
}

// 格式化文件大小
function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 卡片悬停效果
$(document).on('mouseenter', '.template-card', function() {
    $(this).addClass('shadow-lg');
}).on('mouseleave', '.template-card', function() {
    $(this).removeClass('shadow-lg');
});

console.log('templates_new.js 加载完成');
